<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catalog-Z Photo Detail Page</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/templatemo-style.css">

</head>
<body>
<!-- Page Loader -->
<div id="header"></div>
<!--细节-->
<div class="container-fluid tm-container-content tm-mt-60">
    <div class="row mb-4">
        <h2 class="col-12 tm-text-primary" id="pictruemsg">Photos</h2>
    </div>
    <div class="col-xl-4 col-lg-5 col-md-6 col-sm-12" style="float:right;margin-left: 10px">
        <div class="tm-bg-gray tm-video-details">
            <form id="infoForm" method="post" class="tm-bg-black p-5 h-100">
                <input type="hidden" id="iid" name="iid"/>
                <div>
                    <label for="iname">图片名称</label>
                    <input style="margin: 20px;" id="iname" name="iname" type="text" class="validate">
                </div>
                <div>
                    <label for="itag">图片标签</label>
                    <input style="margin: 20px;" id="itag" name="itag" type="text" class="validate">
                </div>
                <div id="cname">
                    <label for="cname">图片分类</label>
                    <select style="width: 235px;margin: 20px;border-radius: 5px" name="cname">

                        <option value=""></option>
                    </select>
                </div>

                <div class="text-center mb-5" style="margin-top: 100px">
                    <button type="button" onclick="update()" class="btn btn-primary tm-btn-big">Modify</button>
                </div>
                <div class="text-center mb-5">
                    <button  type="button" onclick="deleteImg()" class="btn btn-primary tm-btn-big">delete</button>
                </div>
            </form>
        </div>
    </div>
    <!--图片详情-->
    <div class="row tm-mb-90" id="img_loader">
        <!--<div class="col-xl-8 col-lg-7 col-md-6 col-sm-12">
            <img src="image/11.jpg" alt="Image" class="img-fluid">
        </div>-->
    </div>

    <!-- 相关图片-->
    <div class="row mb-4">
        <h2 class="col-12 tm-text-primary">
            Related Photos
        </h2>
    </div>
    <div class="row mb-3 tm-gallery" id="relatedphotos">
        <!-- <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-01.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Hangers</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">16 Oct 2020</span>
                 <span>12,460 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-02.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Perfumes</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">12 Oct 2020</span>
                 <span>11,402 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-03.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Clocks</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">8 Oct 2020</span>
                 <span>9,906 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-04.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Plants</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">6 Oct 2020</span>
                 <span>16,100 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-05.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Morning</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">26 Sep 2020</span>
                 <span>16,008 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-06.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Pinky</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">22 Sep 2020</span>
                 <span>12,860 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-07.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Bus</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">12 Sep 2020</span>
                 <span>10,900 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-08.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>New York</h2>
                     <a href="#">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">4 Sep 2020</span>
                 <span>11,300 views</span>
             </div>
         </div>-->
    </div>

</div> <!-- container-fluid, tm-container-content -->

<!--尾部-->
<div id="footer"></div>

<script src="js/jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
<script type="text/javascript" src="js/getParameter.js"></script>
<script src="js/plugins.js"></script>
<script>
    $(window).on("load", function () {
        $('body').addClass('loaded');
    })
    $(function () {

        $.get("header.html", function (data) {
            $("#header").html(data);
        });
        $.get("footer.html", function (data) {
            $("#footer").html(data);
        });
        var iid = getParameter("iid");
        var cid;
        //图片细节
        $.get("/photograph/photo/findByIid", {iid: iid},
            function (data) {
                $("#pictruemsg").html(data.iname)
                var divmsg = '';
                divmsg += '<img src="' + data.isrc + '" alt="Image" class="img-fluid" width="100%"> \n'
                $("#img_loader").html(divmsg);
                $("#iname").val(data.iname);
                $("#itag").val(data.itag);
                $("#telephone").val(data.author.telephone)
                $("#iid").val(iid)
                cid = data.cid;
            }, "json")

        $.get("/photograph/CategoryServlet/findAllCid", {}, function (data) {
            var select = ' <label for="cname">图片分类</label>' +
                '<select style="width: 235px;margin: 20px;border-radius: 5px" name="cname">'
            for (var i = 0; i < data.length; i++) {
                if (cid == data[i].cid) {
                    console.log(data[i].cname)
                    select += ' <option  value="' + data[i].cname + '" selected >' + data[i].cname + '</option>'
                } else {
                    select += ' <option value="' + data[i].cname + '">' + data[i].cname + '</option>'
                }
            }
            select += '</select>'
            $("#cname").html(select)
        }, "json")


        //相关照片
        $.get("/photograph/CategoryServlet/relateImg", {iid: iid},
            function (data) {
                $relatedphotos = $("#relatedphotos");
                var list = '';
                for (var i = 0; i < data.length; i++) {
                    var li = ' <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">\n' +
                        '            <figure class="effect-ming tm-video-item">\n' +
                        '                <img src="' + data[i].isrc + '" alt="Image" class="img-fluid">\n' +
                        '                <figcaption class="d-flex align-items-center justify-content-center">\n' +
                        '                    <h2>' + data[i].iname + '</h2>\n' +
                        '                    <a onclick="reading(' + data[i].iid + ')" href="photo-detail.html?iid=' + data[i].iid + '">View more</a>\n' +
                        '                </figcaption>\n' +
                        '            </figure>\n' +
                        '            <div class="d-flex justify-content-between tm-text-gray">\n' +
                        '                <span class="tm-text-gray-light">' + data[i].idate + '</span>\n' +
                        '                <span>' + data[i].iclick + ' views</span>\n' +
                        '            </div>\n' +
                        '        </div>';
                    list += li;
                }
                $relatedphotos.html(list);
            }, "json")


    });

    //更新照片
    function update() {
        $.get("/photograph/photo/updateImg", $("#infoForm").serialize(), function (data) {
            alert("修改成功")
        }, "json")

    }

    //删除照片
    function deleteImg() {
        $.get("/photograph/photo/deleteImg", $("#infoForm").serialize(), function (data) {
            alert("删除成功")
            $.get("/photograph/user/findOne", {}, function (data) {
                location.href = "useruploadpage.html?aid=" + data.data.uid + "";
            },"json")
        }, "json")
    }


    //加点击数
    function reading(iid) {
        $.post("/photograph/read/reading", {iid: iid}, function (data) {

        }, "json")
    }

    function search(iname) {
        // var iname = this.getAttribute("name");
        // var iname = iname.toString();
        $.post("/photograph/search/searchImg", {iname: iname},
            function (data) {
                // 1.更新数据  共x页y条
                $("#totalCountSpan").html(data.currentPage);
                $("#totalPageSpan").html(data.totalPage);
                // 2.拼接数据
                $div = $("#relatedphotos");
                var divList = '';
                for (var i = 0; i < data.list.length; i++) {
                    var div = '<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">\n' +
                        '            <figure class="effect-ming tm-video-item">\n' +
                        '                <img src="' + data.list[i].isrc + '" alt="Image" class="img-fluid">\n' +
                        '                <figcaption class="d-flex align-items-center justify-content-center">\n' +
                        '                    <h2>' + data.list[i].iname + '</h2>\n' +
                        '                    <a onclick="reading(' + data.list[i].iid + ')" href="photo-detail.html?iid=' + data.list[i].iid + '">View more</a>\n' +
                        '                </figcaption>\n' +
                        '            </figure>\n' +
                        '            <div class="d-flex justify-content-between tm-text-gray">\n' +
                        '                <span class="tm-text-gray-light">' + data.list[i].idate + '</span>\n' +
                        '                <span>' + data.list[i].iclick + ' views</span>\n' +
                        '            </div>\n' +
                        '        </div>';
                    divList += div;
                }
                $div.html(divList);
                // 3.拼接页码
                var start = data.currentPage - 2;
                var end = data.currentPage + 2;
                if (start < 1) {
                    start = 1;
                    end = 5;
                }
                if (end > data.totalPage) {
                    end = data.totalPage;
                    start = end - 4;
                }
                if (data.totalPage < 5) {
                    start = 1;
                    end = data.totalPage;
                }


                $pageUl = $("#pageUl");

                var pageList = '<div class="col-12 d-flex justify-content-between align-items-center tm-paging-col">';


                var prePage = data.currentPage - 1;
                if (prePage < 1) {
                    prePage = 1;
                }
                pageList += ' <a href="javascript:search(' + prePage + ')" class="btn btn-primary tm-btn-prev mb-2 ">Previous</a>\n';
                //页码
                pageList += '<div class="tm-paging d-flex">';
                for (var i = start; i <= end; i++) {
                    if (i == data.currentPage) {
                        pageList += '<a href="javascript:search(' + i + ');" class="active tm-paging-link">' + i + '</a>';
                    } else {
                        pageList += '<a href="javascript:search(' + i + ');" class="tm-paging-link">' + i + '</a>';
                    }
                }
                pageList += '</div>';
                //下一页
                var nextPage = data.currentPage + 1;
                if (nextPage > data.totalPage) {
                    nextPage = data.totalPage;
                }
                pageList += '<a href="javascript:search(' + nextPage + ');" class="btn btn-primary tm-btn-next">Next Page</a>';
                pageList += '</div>';
                $pageUl.html(pageList);
            }, "json");
    }

    $(window).on("load", function () {
        $('body').addClass('loaded');
    });
</script>
</body>
</html>